<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="600" height="400"></canvas>
    <script>
      const myCanvas = document.querySelector("#myCanvas");
      const context = myCanvas.getContext("2d");

      class edge {
        constructor(x, y, radius, dy, dx) {
          this.x = x;
          this.y = y;
          this.radius = radius;
          this.dy = dy;
          this.dx = dx;
        }
        draw() {
          context.clearRect(0, 0, 600, 600);
          context.beginPath();
          context.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
          context.fillStyle = "blue";
          context.fill();
        }
        move() {
          if (this.y-this.radius <0 || this.y + this.radius > myCanvas.height) {
            this.dy *= -1;
          }  
          if (this.x-this.radius < 0 || this.x + this.radius > myCanvas.width) {
            this.dx *= -1;
          }
          this.x += this.dx;
          this.y += this.dy;
          console.log(this.x,this.y);
        }
      }
      const rect = new edge(240, 310, 30, 2, 2);

      function animate() {
        rect.draw();
        rect.move();
        requestAnimationFrame(animate);
      }
      animate();
    </script>
  </body>
</html>
